
/* 
1 获取数据
  1 从redux中获取到 当前城市
  2 接口中获取到 热门城市
  3 接口中获取到 所有城市
2 直接在 组件挂载完毕中 获取当前的城市名称 undefined
  1 原因 
    1 获取当前城市的 代码 异步 需要时间
    2 组件挂载 很快就执行完 => 数据还没有回来 
    3 导致 componentDidMount 获取当前城市 undefined
  2 解决 
    1 在App.js里面处理
      1 先获取到 当前的城市名称
      2 再在 render函数中 对整个项目的路由页面 做一个条件渲染即可
        { 当前城市 && Router标签  }
3 处理一下这一些数据 假设到 这些数据 最终的数据结构 

4 在页面中引入 List组件
  1 修改一下 rowRender内的渲染函数
  2 修改List组件上的属性 （宽度和高度）
    1 rowHeight 不能写死一个值了  
    2 rowHeight 可以接收一个函数 - 提供 当前的循环索引
      让我们自己根据自己的数组来计算每一行的高度
    3 width
    4 height 

5 手写字母列表
  1 定位在右侧
  2 点击 切换选中事件即可
  3 获取当前被选中的索引 
    找List组件的一个功能（属性 scrollToIndex ） 根据索引 来 切换 List标签的 当前显示的 项

6 大列表滚动的时候 右侧的字母列表跟着切换
  1 List组件的一个事件即可 onRowsRendered 
    和 滚动相关 还有会一个参数 （startIndex）= 大列表当前的索引 

7 点击城市名称
  1 修改 当前选中的城市 因为后台数据量的关系 (目前只有北京 上海 广州 和深圳 城市有真实的房源数据)
    1  当前的城市的数据 存在 redux中
    2  mapReducer.city =>  { name:"上海",point:{lng,lat}}
    3 现在手上有 城市名称 但是没有 城市所在的经纬度 => 逆地址解析
  2 返回上一页

 */

import React, { Component } from 'react';
import { NavBar, Icon } from 'antd-mobile';
import { connect } from "react-redux";
import axios from "../../utils/request";
import indexCss from "./index.module.scss";
import { List } from "react-virtualized";
import {changeCityAction,clearCityAction  } from "../../store/actionCreator";

console.log("城市选择页面的代码被加载了");

class Index extends Component {
  state = {
    // 城市名称列表
    list: [],
    // 字母列表
    letters: [],
    // 字母列表选中的索引
    currentIndex: 0
  }
  async componentDidMount() {
    let letters = ["#", "热"];
    let finalList = [];
    // 1 获取到当前的城市
    const { cityName } = this.props;
    // 2 获取热门城市信息
    // const hots = (await axios.get("/area/hot")).data.body;
    // // 3 获取所有的城市
    // let allCitys = (await axios.get("/area/city?level=1")).data.body;

    const resArr=await Promise.all([axios.get("/area/hot"),axios.get("/area/city?level=1")]);
    const hots=resArr[0].data.body;
    let allCitys=resArr[1].data.body; 

    finalList.push({
      name: "当前定位",
      values: [{ name: cityName }]
    });

    finalList.push({
      name: "热门城市",
      values: hots.map(v => ({ name: v.label }))
    });

    // allCitys 里面的short属性进行排序
    allCitys.sort((a, b) => a.short < b.short ? -1 : 1);

    allCitys.forEach(v => {
      // 获取里面的首字母 
      const firstLetter = v.short[0].toUpperCase();
      // 判断 finalList 里面是否已经存在 A B C 
      // vv { name: "当前定位", values: [{ name: "北京" }] }
      const index = finalList.findIndex(vv => vv.name === firstLetter);
      if (index === -1) {
        // finalList  还没有   { name: A, values: [{ name: "北京" }] }
        finalList.push({
          name: firstLetter,
          values: [{ name: v.label }]
        })
        letters.push(firstLetter);
      } else {
        // 已经存在了 { name: A, values: [{ name: "北京" }] }
        finalList[index].values.push({ name: v.label })
      }
    });


    this.setState({ list: finalList, letters });
  }

  // 城市名称的点击事件
  cityNameClick=(cityName)=>{
    this.props.changeCity(cityName);
    this.props.history.go(-1);
  }

  // 列表循环渲染的函数
  rowRenderer = ({ key, index, isScrolling, isVisible, style }) => {
    const v = this.state.list[index];
    return (
      <div className={indexCss.city_group} key={key} style={style} >
        <div className={indexCss.city_group_title}>{v.name}</div>
        <div className={indexCss.city_group_content}>
          {v.values.map((vv, ii) => <div 
          onClick={this.cityNameClick.bind(this,vv.name)}
          className={indexCss.city_name} key={ii} >{vv.name}</div>)}
        </div>
      </div>

    );
  }

  // 动态的计算每一行的高度
  rowHeight = ({ index }) => {
    // 每一行的高度 = 标题的高度  + 循环项的values.length * 40
    return 40 + this.state.list[index].values.length * 40;
  }

  // 字母点击事件
  letterClicks = (currentIndex) => {
    this.setState({ currentIndex });
  }

  // List列表滚动事件
  onRowsRendered = ({startIndex}) => {
    this.setState({ currentIndex:startIndex });
  }
  render() {
    const { list, letters, currentIndex } = this.state; 
    return (
      <div>
        <div className={indexCss.city_nav}>
          <NavBar
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => this.props.history.go(-1)}
          >城市选择</NavBar>
        </div>
        <div className={indexCss.city_select_content}>
          <div className={indexCss.city_main}>
            <List
              width={window.screen.width}
              height={window.screen.height - 45}
              rowCount={list.length}
              rowHeight={this.rowHeight}
              rowRenderer={this.rowRenderer}
              onRowsRendered={this.onRowsRendered}
              scrollToIndex={currentIndex}
              scrollToAlignment="start"
            />
          </div>

          <div className={indexCss.letters}>
            {letters.map((v, i) => <div className={
              [
                indexCss.letter_item,
                currentIndex === i ? indexCss.active : ''
              ].join(' ')
            }
              onClick={this.letterClicks.bind(this, i)}

              key={v} >{v}</div>)}
          </div>
        </div>
      </div>
    );
  }
}


const mapStateToProps = (state) => {

  return {
    cityName: state.mapReducer.city.name
  }
}

const mapDispathToProps=(dispatch)=>{
  return {
    changeCity(cityName){


      // 清空当前城市
      dispatch(clearCityAction());
      // 执行异步action
      dispatch(changeCityAction(cityName));
    }
  }
}


export default connect(mapStateToProps,mapDispathToProps)(Index);
